網頁設計的預處理分成幾個階段：Wireframe、Mockup、Prototype，翻譯都叫「原型」，但其實是有分層次的。（以下舉蝦皮 app 為例子）

1. Wireframe 線稿

如果你想開發一個網頁或 app，當然不可能一開始就設計出這種圖：

（圖片取自蝦皮 app 截圖）

應該會先想好要有什麼功能，大概要放在哪邊，頁面流程大概會須要怎麼進行，這個時候不需要太精緻的圖，重點要放在「流程」。就算是很美的介面，難用的流程也會讓使用者離開。這也是 Wireframe 的意義，先讓自己先搞懂流程按鈕，頁面要如何移轉進行。因此畫出來的圖不需要很精緻，越粗糙越省時越好，請把精力花在流程設計上吧！

（圖片為本人設計）
這就是線稿的概念，只需要看得懂應該出現的東西會在哪邊，哪個按鈕可以連結到什麼樣的頁面即可。

2. Mockup 精稿

精稿顧名思義就是要把所有東西都呈現出來，在線稿確定沒問題後，就要花時間設計精稿，這時候才需要把心思精力花費在配色、美編等等，此階段需要在不影響原本的框架情況下去做加工設計。這個時候更必須去思考什麼樣的按鈕位置跟顏色可以促進點擊率，這也就是 UI/UX 的學問。Mockup 會跟你未來的 app 長的一模一樣，也就是上面第一張圖的樣子。

3. Protytype 原型

到了這個階段就是工程師開始 coding 的時候啦，基本上到這個時候前面確認的功能、流程，甚至是按鈕位置都不應該再做更動，但是事實上有很多（突然想到的功能）會在這個時候被加上去，這也是為什麼工程師常常被說爆肝的原因，因為前面沒做好的都是後人要承擔啊 (#

UI 如何下手

最常拿來畫 UI 的兩大工具分別為 iOS 的 Sketch，以及 Adobe 的 XD，由於我不是蘋果使用者，因此我都是拿 Adobe XD 來使用。Adobe 這套軟體也非常佛心，是完全免費下載的，除了想要增加線上文件的公開數量需要付費之外，免費的部分基本上功能都非常齊全。也因為這套軟體非常新，因此更新頻率非常高，官方有持續新增功能讓整個軟體更加完善。